import logo from './logo.svg';
import './App.css';
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
import ListEmployeeComponent from './components/ListEmployeeComponent';
import HeaderComponent from './components/HeaderComponent';
import FooterComponent from './components/FooterComponent';
import CreateEmployeeComponent from './components/CreateEmployeeComponent';
import UpdateEmployeeComponent from './components/UpdateEmployeeComponent';
import ViewEmployeeComponent from './components/ViewEmployeeComponent';

function App() {
  return (
    <Router>
      <HeaderComponent />
      <div className="container">
          <Switch>
            <Route path="/" exact component={ListEmployeeComponent} />
            <Route path="/employees" component={ListEmployeeComponent} />
            <Route path="/add-employee" component ={CreateEmployeeComponent} />
            <Route path="/update-employee/:id" component = {UpdateEmployeeComponent} />
            <Route path="/view-employee/:id" component={ViewEmployeeComponent} />
          </Switch>
         
      </div>
      <FooterComponent />
    </Router>
    // <div>
    //   <HeaderComponent/>
    //   <div className="container">
    //     <ListEmployeeComponent />
    //   </div>
    //   <FooterComponent />
    // </div>
    // <div className="App">
    //   <header className="App-header">
    //     {/* <img src={logo} className="App-logo" alt="logo" />
    //     <p>
    //       Edit <code>src/App.js</code> and save to reload.
    //     </p>
    //     <a
    //       className="App-link"
    //       href="https://reactjs.org"
    //       target="_blank"
    //       rel="noopener noreferrer"
    //     >
    //       Learn React
    //     </a> */}
    //     <h1>Hello World!</h1>
    //   </header>
    // </div>
  );
}

export default App;
